@use '../../styles/el/aside' as *;
@use '@xtail/vue3/es/components/SIconIconify/SIconIconify.css' as *;

.s-layout-side-hidden {
  position: relative;

  .s-layout-side-hidden__side {
    height: 100%;
  }

  .s-layout-side-hidden--left__side-border {
    border-right: 1px solid var(--el-menu-border-color);
  }

  .s-layout-side-hidden--right__side-border {
    border-left: 1px solid var(--el-menu-border-color);
  }

  .s-layout-side-hidden__trigger {
    position: absolute;
    z-index: 1;
    top: 50%;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;

    .s-layout-side-hidden__trigger-icon {
      padding: 0.5rem;
      color: #ccc;
      transform: scale(1.25);
      transition:
        color,
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        color: #999;
        transform: scale(1.75);
      }
    }
  }
}

.s-layout-side-hidden--hidden {
  .s-layout-side-hidden--left__trigger {
    left: 100%;
    transform: translate(-25%, -50%);

    &:hover {
      transform: translate(0, -50%);
    }
  }

  .s-layout-side-hidden--right__trigger {
    right: 100%;
    transform: translate(25%, -50%);

    &:hover {
      transform: translate(0, -50%);
    }
  }
}

.s-layout-side-hidden--showed {
  .s-layout-side-hidden--left__trigger {
    right: 0;
    transform: translate(25%, -50%);

    &:hover {
      transform: translate(0, -50%);
    }
  }

  .s-layout-side-hidden--right__trigger {
    left: 0;
    transform: translate(-25%, -50%);

    &:hover {
      transform: translate(0, -50%);
    }
  }
}

.s-layout-side-hidden--left-enter-active,
.s-layout-side-hidden--left-leave-active,
.s-layout-side-hidden--right-enter-active,
.s-layout-side-hidden--right-leave-active {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
.s-layout-side-hidden--left-leave-active {
  position: absolute;
  top: 0;
  left: 0;
}
.s-layout-side-hidden--right-leave-active {
  position: absolute;
  top: 0;
  right: 0;
}

.s-layout-side-hidden--left-enter-from,
.s-layout-side-hidden--left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.s-layout-side-hidden--left-enter-to,
.s-layout-side-hidden--left-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.s-layout-side-hidden--right-enter-from,
.s-layout-side-hidden--right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.s-layout-side-hidden--right-enter-to,
.s-layout-side-hidden--right-leave-from {
  opacity: 1;
  transform: translateX(0);
}
